<template>
    <el-row>
        <el-col :span="4">
            <el-select v-model="province" placeholder="请选择省份">
                <el-option v-for="item in provinceList" :key="item.provinceCode" :label="item.provinceName"
                    :value="item.provinceCode" />
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-select v-if="cityShow" v-model="city" placeholder="请选择地市" multiple>
                <el-option v-for="item in cityList" :key="item.cityCode" :label="item.cityName" :value="item.cityCode" />
            </el-select>
        </el-col>
    </el-row>
</template>

<script>

import commonAPI from '@/api/condType.js';

export default {
    name: "Address",
    mounted() {
        // this.getProvince()
        this.getCityList()
    },
    props: {
        multiple: {
            type: Boolean,
            default: () => true
        }
    },
    watch: {
        province(val) {
            if (val === "000000") {
                this.cityShow = false
            } else {
                this.cityShow = true
                this.province = val           
                this.getCityList()
            }
            this.$emit("update:province", val)
            this.city = this.multiple ? [] : ""
        },
        city(val) {
            this.$emit("update:city", val)
        }
    },
    data() {
        return {
            province: "", // 江西省
            city: [], // 江西省
            cityShow: true,
            provinceList: [
                { provinceName: "江西省", provinceCode: "360000" },
                { provinceName: "全国", provinceCode: "000000" },
            ],
            cityList: [],
        }
    },
    methods: {
        getProvince() {
            commonAPI.getProvinceList(this.province).then(({ data: res }) => {
                if (res?.code == '000000') {
                    this.provinceList = res.resultBody;
                }
            });
        },
        getCityList() {
            if (!this.province) return
            commonAPI.queryCityList(this.province).then(({ data: res }) => {
                if (res?.code == '000000') {
                    this.cityList = res.resultBody;
                }
            });
        }
    },
}
</script>

<style lang="scss" scoped>

</style>